<!--
 * @Author: 许警 11378748333@
 * @Date: 2025-06-04 13:49:30
 * @LastEditors: 许警 11378748333@
 * @LastEditTime: 2025-07-17 13:14:14
 * @FilePath: /hsxlsystem/src/views/content/video/list/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!--  -->
    <!-- 头部 -->
    <div class="global-button">
      <a-button type="primary" @click="edit()" class="d-a-center">新增</a-button>
    </div>
    <!-- 列表 -->
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="renderData"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #type="{ record }">
        <div>{{ appTypeMap[record.type] }}</div>
      </template>
      <template #category="{ record }">
        <div>{{ videoTypeMap[record.category] }}</div>
      </template>
      <template #videoPage="{ record }">
        <a-image :src="record.videoPage"></a-image>
      </template>

      <template #operation="{ record }">
        <a-button type="link" @click="edit(record)">编辑</a-button>
        <a-button type="link" danger @click="del(record)">删除</a-button>
      </template>
    </a-table>

    <InvoiceModal ref="invoiceModalRef" @submit="handleSearch(1)"></InvoiceModal>
    <!-- <inputModal @ok="handleOk" ref="inputModalRef" type="input" label="金额" title="修改价格" :number="data.number"></inputModal> -->
  </div>
</template>
<script setup>
import { reactive, ref, watch, computed, createVNode, toRefs, defineOptions } from 'vue'
import { columnsArr, dataObj, statusColorObj, orderStatus } from './data'
import { message } from 'ant-design-vue'
import InvoiceModal from '../components/InvoiceModal.vue'
// import inputModal from '@/components/common/inputModal.vue'
import { useTable, useModal, useSelects } from '@/hooks'
import { selectAdminVideoList, deleteVideoById } from '@/api/content/index'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { appTypeMap, videoTypeMap } from '@/utils/dict.js'

import { useStore } from 'vuex'

defineOptions({
  name: 'VideoOrder'
})
// 状态列表

const columns = columnsArr

const data = reactive(dataObj)
// 选择时间
const panelChange = (date, dateString) => {
  formModel.value.startTime = dateString[0]
  formModel.value.endTime = dateString[1]
}
const store = useStore()
const userInfo = JSON.parse(store.state.userInfo)
const useStatus = () => {
  let map = {
    29: 1,
    30: 2
  }
  return map[userInfo.departmentId] ? map[userInfo.departmentId] : 0
}
const status = useStatus()
//必须有括号 建议箭头函数 防止深拷贝
const getParams = () => ({
  status: status
})

const { info, renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
  api: selectAdminVideoList,
  getParams,
  usePagination: false
})
handleSearch(1)

const invoiceModalRef = ref()

const del = record => {
  const { closeModal } = useModal.confirm({
    title: () => '你确定删除当前项吗?',
    icon: () => createVNode(ExclamationCircleOutlined),
    okType: 'danger',
    onOk: async () => {
      let res = await deleteVideoById({
        id: record.id
      })
      if (res.success) {
        message.success('删除成功')
        handleSearch()
        closeModal()
      }
    },
    class: 'test'
  })
}

const { renderData: selectsRenderData, rowSelection } = useSelects({
  key: 'id'
})

const edit = data => {
  invoiceModalRef.value.showModal(data)
}
</script>

<style scoped lang="less">
.search {
  // background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
